<template>
  <BasicDrawer @register="registerDrawer" destroyOnClose :title="title" :width="drawerWith" :showFooter="true" @ok="handleSubmit">
    <div>
      <a-form :model="formState" ref="viproomServer">
        <a-form-item name="viproomServerIds">
          <a-transfer :dataSource="viproomServerListData" v-model="formState.viproomServerIds" :listStyle="{ width: '45%', height: '880px' }" :titles="[' 可选贵宾厅服务', ' 已选贵宾厅服务']" :render="item => item.title" :target-keys="formState.viproomServerIds" @change="handleTransferChange" filterable show-search></a-transfer>
        </a-form-item>
      </a-form>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { reactive, ref, unref } from 'vue';
import { BasicDrawer, useDrawerInner } from '@apps/antd-admin/src/components/drawer';
import { queryViproomServer, setViproomServer, viproomserverList } from '../api';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';
const { getIsMobile } = useAppInject();
const drawerWith = ref('40%');
if (unref(getIsMobile)) {
  drawerWith.value = '80%';
}
const viproomServer = ref();
const viproomServerListData = ref();
const formState = reactive({
  viproomServerIds: [],
});

let viproomId = ref();

let title = ref('');
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async data => {
  let record = data.record;
  title.value = record.goodsName + '服务设置';
  setData(record);
});

/**
 * 穿梭框change
 * @param targetKeys
 * @param direction
 * @param moveKeys
 */
function handleTransferChange(targetKeys, direction, moveKeys) {
  formState.viproomServerIds = targetKeys;
  console.info(formState.viproomServerIds.join(','));
}

async function setData(data) {
  viproomId = data.viproomId;
  console.info('viproomId', viproomId);
  let viproomServerIds = await queryViproomServer({
    viproomId: viproomId,
  });
  viproomserverList({}).then(data => {
    data.map(item => {
      item.key = item.viproomServerId;
      item.title = item.serverName;
    });
    viproomServerListData.value = data;
    formState.viproomServerIds = viproomServerIds;
  });
}

/**
 * 提交事件
 */
async function handleSubmit() {
  viproomServer.value.validate().then(async () => {
    await setViproomServer({
      viproomId: viproomId,
      viproomServerIds: formState.viproomServerIds.join(','),
    });
    closeDrawer();
  });
}
</script>
